<template>
	<view class="bg_color_box">
		<view class="bg_color">
			<view :style="'height:'+statusbarH+'px'"></view>
			<view style="height: 44rpx;"></view>
			<view class="user_flex">
				<view class="userInfo_flex">
					<view class="user_log">
						<u-icon name="server-man" size="50"></u-icon>
					</view>
					<!-- <image style="width: 150rpx;height: 150rpx;border-radius: 50%;" src="../../static/order/status/wait_receipt.png" mode="aspectFill"></image> -->
					<view style="margin-left: 20rpx;">
						<view class="phot">{{ userlise.phone }}</view>
						<view class="user_name">{{ userlise.name || '' }}</view>
					</view>
				</view>
				<view>
					<button style="background-color: transparent;color: #303133;padding: 0;font-size: 32rpx;" type="primary" open-type="contact">
						<u-icon name="server-fill" color="#111" size="25"></u-icon>
					</button>
				</view>
			</view>
			<view class="po_ab">
				<view style="margin-left: 20rpx;">
					<view class="ntegral_flex">
						<u-icon name="integral-fill" color="rgba(142, 94, 0, 0.3)" size="25"></u-icon>
						{{ userType == 2? '代表' : '代理商' }}
					</view>
					<view class="font_size">
						·激活为{{ userType == 2? '代表' : '代理商' }}，可以接任务
					</view>
				</view>
				<view @click="gotoActivaFun" v-if="((userType == 2 && status == 6) || (userType == 1 && status == 4))" class="color_jh">
					已激活
				</view>
				<view v-else class="color_jh" @click="gotoActivaFun">
					立即激活
				</view>
			</view>
		</view>
		<view class="soll_flex">
			<view style="background: #fff;margin: 20rpx; padding: 0 30rpx;border-radius: 10rpx;box-sizing: border-box;">
				<u-cell-group :border="false">
					<u-cell :border="true"  title="我的消息" arrow-direction="right"  @click="myMessageFun" isLink >
						<u-icon slot="icon" size="25" name="chat" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell isLink arrow-direction="right" @click="userType == 2?gotoActivaFun():gotoTionFun()">
						<view slot="title">
							<span v-if="userType == 2" style="color:#2979ff">激活流程</span> <span v-if="userType == 1"  style="margin-left: 20rpx;color:#2979ff">代理商激活流程</span> <span style="margin-left: 20rpx;">{{ ((userType == 2 && status == 6) || (userType == 1 && status == 4))? '已激活': '未激活'}}</span>
						</view>
						<u-icon slot="icon" size="25" name="fingerprint" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell v-if="userType == 2"  isLink arrow-direction="right">
						<!-- <u-icon slot="icon" size="25" name="heart-fill" color="#2979ff"></u-icon> -->
						<view slot="title">
						  <span  @click="agreementListFun(1)" style="color:#2979ff">代表协议</span> 
							<span @click="agreementListFun(2)" style="margin-left: 20rpx;color:#2979ff">反腐</span> 
							<span @click="agreementListFun(3)" style="margin-left: 20rpx;color:#2979ff">行为准则</span>
							<span style="margin-left: 20rpx;">{{ `${((userType == 2 && status == 6) || (userType == 1 && status == 4))? '已签订': '未签订'}`}}</span>
						</view>
						<u-icon slot="icon" size="25" name="heart-fill" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell v-else>
						<view slot="title">
						协议:<span  @click="myAgreementFunmin(0)" style="color:#2979ff">代理商协议</span> 
							<span @click="myAgreementFunmin(1)" style="margin-left: 20rpx;color:#2979ff">推广</span> 
							<span @click="myAgreementFunmin(2)" style="margin-left: 20rpx;color:#2979ff">反腐</span>
							<span style="margin-left: 20rpx;">{{ ((userType == 2 && status == 6) || (userType == 1 && status == 4))? '已激活': '未激活'}}</span>
						</view>
						<u-icon slot="icon" size="25" name="heart-fill" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell  title="修改密码" isLink arrow-direction="right" @click="eithPassFun">
						<u-icon slot="icon" size="25" name="coupon" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell isLink arrow-direction="right">
						<view slot="title" class="w_100" style="width: 100%;">
							<button style="text-align: left;width: 100%;background-color: transparent;color: #303133;padding: 0;font-size: 32rpx;display: inline-block;height: 20px;line-height: 20px;" type="primary" open-type="contact">联系客服</button>
						</view>
						<u-icon slot="icon" size="25" name="kefu-ermai" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell  v-if="userType == 1" title="我的对账单" isLink arrow-direction="right" @click="myStatementFun">
						<u-icon slot="icon" size="25" name="order" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell  v-if="userType == 1" title="我的积分" isLink arrow-direction="right"  @click="myScoresFun">
						<u-icon slot="icon" size="25" name="integral" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell v-if="userType == 1" :border="true" title="扫码注册" isLink arrow-direction="right"  @click="scanCodeFun">
						<u-icon slot="icon" size="25" name="scan" color="#2979ff"></u-icon>
					</u-cell>
					<u-cell v-if="userType == 1" :border="false" title="我的代表" isLink arrow-direction="right"  @click="scanCodeFunDb">
						<u-icon slot="icon" size="25" name="account-fill" color="#2979ff"></u-icon>
					</u-cell>
					
					
				</u-cell-group>
			</view>
			<view class="loutSty" @click="loutFun">退出登录</view>
		</view>
	</view>
</template>

<script>
	import { getbyuser, logout, medicalRepresentative } from "@/api/login/index.js"
	import { agencyBuId  } from '@/api/personalCenter.js' 
  export default {
    components: {},
    data() {
      return {
				agreementList: [],
				statusbarH: 0,
				userType: '',
				status: '',
				userlise: {},
				Id: '',
				agencyId: '',
      }
    },
		mounted() {
			uni.getSystemInfo({
					success:(e)=> {
					this.statusbarH = e.statusBarHeight;
				}
			})
		},
		onShow() {
			if(!uni.getStorageSync('userInfoRole')) return
			if (JSON.parse(uni.getStorageSync('userInfo')).userType == '02') {
				// 代表
				this.userType = 2
			} else{
				// 代理商
				this.userType = 1
			}
			((JSON.parse(uni.getStorageSync('userInfo')).userType == '02')? medicalRepresentative : getbyuser)(JSON.parse(uni.getStorageSync('userInfo')).userId).then((resmin) => {
				this.status = resmin.data.status
				this.userlise = resmin.data
				this.Id = resmin.data.id
				this.agencyId = resmin.data.agencyId
				this.agreementList = resmin.data.agreementList
			})
		},
		methods: {
			agreementListFun(index) {
				if (this.agreementList.length == 0) {
					uni.showToast({
					  title: '未上传协议',
					  icon: "none",
					  duration: 2000,
					})
					return
				}
				let urls = (this.agreementList.filter(item => item.type == index))[0].url
				if (urls.split('.')[urls.split('.').length-1] == 'jpg' || urls.split('.')[urls.split('.').length-1] == 'png') {
					uni.previewImage({
						current: 0,
						urls: [urls],
					})
				} else if (urls.split('.')[urls.split('.').length-1] == 'pdf') {
					uni.navigateTo({
						url: '/pages/pdfLook/index?url=' + urls
					})
				} else {
					uni.showToast({
					  title: '请上传图片或者pdf类型的协议',
					  icon: "none",
					  duration: 2000,
					})
				}
			},
			loutFun() {
				logout().then((res) => {
					uni.removeStorageSync("token");
					uni.removeStorageSync("userInfoRole");
					uni.removeStorageSync("userInfo");
					uni.reLaunch({
						url: "/pages/login/index"
					})
				})
			},
			myAgreementFunmin(index) {
				agencyBuId(this.Id).then((res) => {
					if (res.data.agreementList.length > 0) {
						let urls = (res.data.agreementList.filter(item => item.type == index))[0].url
						if (urls.split('.')[urls.split('.').length-1] == 'jpg' || urls.split('.')[urls.split('.').length-1] == 'png') {
							uni.previewImage({
								current: 0,
								urls: [urls],
							})
						} else if (urls.split('.')[urls.split('.').length-1] == 'pdf') {
							uni.navigateTo({
								url: '/pages/pdfLook/index?url=' + urls
							})
						} else {
							uni.showToast({
							  title: '请上传图片或者pdf类型的协议',
							  icon: "none",
							  duration: 2000,
							})
						}
					} else {
						uni.showToast({
						  title: '未上传协议',
						  icon: "none",
						  duration: 2000,
						})
					}
					
				})
			},
			myAgreementFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					if (this.userType == 1) {
						agencyBuId(this.Id).then((res) => {
							if (res.data.agreementList.length > 0) {
								if (res.data.agreementList[0].url.split('.')[res.data.agreementList[0].url.split('.').length-1] == 'jpg' || res.data.agreementList[0].url.split('.')[res.data.agreementList[0].url.split('.').length-1] == 'png') {
									uni.previewImage({
										current: 0,
										urls: [res.data.agreementList[0].url],
									})
								} else if (res.data.agreementList[0].url.split('.')[res.data.agreementList[0].url.split('.').length-1] == 'pdf') {
									uni.navigateTo({
										url: '/pages/pdfLook/index?url=' + res.data.agreementList[0].url
									})
								} else {
									uni.showToast({
									  title: '请上传图片或者pdf类型的协议',
									  icon: "none",
									  duration: 2000,
									})
								}
								
							} else {
								uni.showToast({
								  title: '未上传协议',
								  icon: "none",
								  duration: 2000,
								})
							}
							
						})
						return
					}
					uni.navigateTo({
						url: "/pages/personalCenter/myAgreementCheck/index?id="+this.Id
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
				
			},
			gotoTionFun() {
				uni.navigateTo({
					url: "/pages/personalCenter/agencyActivation/index"
				})
			},
			gotoActivaFun() {
				if (this.userType == 2) {
					uni.navigateTo({
						url: "/pages/personalCenter/activationProcess/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/personalCenter/agencyActivation/index"
					})
				}
				
			},
			eithPassFun() {
				uni.navigateTo({
					url: "/pages/register/setPassword/index?type='setting'"
				})
			},
			scanCodeFunDb() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					uni.navigateTo({
						url: "/pages/myTaskrepresent/index"
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
			},
			myScoresFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					uni.navigateTo({
						url: "/pages/personalCenter/myScores/index"
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
				
			},
			myStatementFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					uni.navigateTo({
						url: "/pages/personalCenter/myStatement/index"
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
				
			},
			myMessageFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					uni.navigateTo({
						url: "/pages/personalCenter/myMessage/index"
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
			},
			scanCodeFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)) {
					uni.navigateTo({
						url: "/pages/personalCenter/scanCode/index"
					})
				} else {
					uni.showToast({
					  title: '请先激活再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
			},
			
		}
  }
</script>

<style scoped lang="scss">
	.bg_color_box {
		background-color: #f7f8ff;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.soll_flex {
		flex: 1;
		overflow: scroll;
	}
	.user_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		.userInfo_flex {
			display: flex;
			align-items: center;
		}
	}
	.bg_color {
		background-color: rgb(3, 121, 255);
		padding-bottom: 100rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 100rpx;
	}
	.user_log {
		width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.phot {
		font-weight: 900;
	}
	.user_name {
		display: inline-block;
		padding: 0 20rpx;
		color: #fff;
		font-weight: 900;
		font-size: 24rpx;
		background-color: rgba(16, 16, 16, 0.28);
		border-radius: 100rpx;
	}
	.po_ab {
		position: absolute;
		width: 90%;
		height: 130rpx;
		background-color: rgb(247, 187, 71);
		left: 50%;
		transform: translateX(-50%);
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: -25%;
		.ntegral_flex {
			display: flex;
			align-items: center;
			color: #111;
			font-weight: 400;
		}
		.font_size {
			font-size: 26rpx;
		}
	}
	.color_jh {
		background-color: rgb(55, 55, 55);
		color: rgb(247, 187, 71);
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	.w_100 {
		display: inline-block;
		width: 140rpx;
		overflow: hidden;
	}
	.loutSty {
		border: 1px solid #2979ff;
		width: 400rpx;
		text-align: center;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 100rpx;
		margin: auto;
		margin-top: 30rpx;
		color: #2979ff;
	}
</style>